<template lang="pug">
  .page
    .pl-20.pr-20.bg-white
      Table.beautiful-table(:columns="thead" :data="tableData" :loading="loading" :stripe="true" ref="demoTable")
        .clearfix.pr-24.pl-24.font-16(slot="header")
          .table-title-lefttxt.pull-left
            span.leftText
              | 合计:
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              | 条
          .pull-right.table-title-btns
            Button.mr-10(v-if="hasSave" type="info" @click="handleShowCreateUpgradeNoticeModal(null)") 新增
        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            prev-text="上一页"
            next-text="下一页"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )
        template(slot-scope="{ row, index }" slot="action")
          Button.mr-10(type="text" size="small" @click="handleShowUpgradeNoticeDetailModal(row.id)") 详情
          Button.mr-10(v-if="hasSave" type="text" size="small" :disabled="row.bulletinStatus === 1" @click="editBtn(row.id)") 编辑
          template(v-if="hasBulletinStatus")
            Button(type="text" size="small"  v-if="row.bulletinStatus === -1" @click="enabledList(row.id, 1)") 启用
            Button(type="text" size="small" v-if="row.bulletinStatus === 1" @click="enabledList(row.id, -1)") 禁用

    //- 新建弹窗
    CreateUpgradeNoticeModal(ref="CreateUpgradeNoticeModal" @get-list="searchFn" :formData="formData" :createSpinShow="createSpinShow")

    //- 详情弹窗
    UpgradeNoticeDetailModal(ref="UpgradeNoticeDetailModal" :bulletinData="bulletinData" :detailSpinShow="detailSpinShow")
</template>

<script>
import { Common } from '@/utils/common.js'
import BulletinApi from '@/api/Bulletin.api.js'
import { UpgradeNoticeThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'
import CreateUpgradeNoticeModal from './modal/createUpgradeNoticeModal.vue'
import UpgradeNoticeDetailModal from './modal/upgradeNoticeDetailModal.vue'

export default {
  name: '', // 升级公告

  components: {
    CreateUpgradeNoticeModal,
    UpgradeNoticeDetailModal
  },

  data () {
    return {
      loading: false,
      detailSpinShow: true,
      createSpinShow: true,
      bulletinId: '', // 公告ID
      bulletinData: null, // 公告内容
      thead: _cloneDeep(UpgradeNoticeThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      formData: {
        id: '',
        versionNumber: '',
        releaseTime: this.$moment(new Date()).format('YYYY-MM-DD'),
        bulletinSynopsis: '',
        bulletinStatus: -1,
        bulletinContent: '',
        rowVersion: ''
      }
    }
  },
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    hasSave () {
      return this.actionArr.indexOf('Save') > -1
    },
    hasBulletinStatus () {
      return this.actionArr.indexOf('BulletinStatus') > -1
    },
    hasGetList () {
      return this.actionArr.indexOf('GetList') > -1
    },
  },

  mounted () {
    this.getList()
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.getList()
    },
    getList () {
      this.loading = true
      BulletinApi.GetBulletinList({
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }).then(res => {
        this.loading = false
        console.log(res)
        if (res.data.success) {
          this.tableData = res.data.data
          this.tableComone.totalRows = res.data.totalRows
        }
      })
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.getList()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.getList()
    },
    // 编辑
    editBtn (id) {
      this.createSpinShow = true
      this.$refs.CreateUpgradeNoticeModal.show()
      this.$refs.CreateUpgradeNoticeModal.createUpgradeNoticeModalTitle = id ? '修改升级公告' : '新增升级公告'
      BulletinApi.GetBulletin({
        id: id
      }).then(res => {
        this.createSpinShow = false
        console.log(res)
        this.formData = res.data.data 
      })
    },

    // 显示新增弹窗
    handleShowCreateUpgradeNoticeModal (id) {
      this.createSpinShow = false
      this.$refs.CreateUpgradeNoticeModal.show()
      this.$refs.CreateUpgradeNoticeModal.createUpgradeNoticeModalTitle = id ? '修改升级公告' : '新增升级公告'
      this.formData = {
        id: '',
        versionNumber: '',
        releaseTime: this.$moment(new Date()).format('YYYY-MM-DD'),
        bulletinStatus: -1,
        bulletinContent: '',
        rowVersion: ''
      }
    },

    // 显示查看详情弹窗
    handleShowUpgradeNoticeDetailModal (id) {
      this.detailSpinShow = true
      this.$refs.UpgradeNoticeDetailModal.isShowUpgradeNoticeDetailModal = true
      this.$refs.UpgradeNoticeDetailModal.basicDataId = id
      BulletinApi.GetBulletin({
        id: id
      }).then(res => {
        this.detailSpinShow = false
        console.log(res)
        this.bulletinData = res.data.data 
      })
    },

    // 启用/禁用
    async enabledList (id, enabled) {
      var params = {
        BulletinId: id,
        Userid: JSON.parse(localStorage.getItem('clientLoginInfo')).data.userId,
        BulletinStatus: enabled
      }
      let res = await BulletinApi.UpBulletin(params)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.getList()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    }
  } // methods end
}
</script>

<style lang="less" scoped>

</style>
